<style scoped>
  .expand-row{
    margin-bottom: 16px;
  }
  .lyx-table-btn{
    margin-right: 5px;
    margin-bottom: 2px;
  }
  .title-size {
    font-weight: bold;
    font-size: 1rem;
  }
</style>
<template>
  <div>
      <Form label-position="right" :label-width="100" style="position: relative;" :model="formDate">
      <Row class="mb20">
        <Col span="13" class="ivu-form-item-label title-size">新增房屋租赁登记备案证明</Col>
      </Row>
      <Row class="mb20">
        <Col span="5" class="ivu-form-item-label">租赁证编号：</Col>
        <Col span="5" offset="1" class="ivu-form-item-content">
          <Input v-model="formDate.cardNum" ></Input>
        </Col>
      </Row>
      <Row class="mb20">
        <Col span="5" class="ivu-form-item-label">房屋坐落：</Col>
        <Col span="10" offset="1" class="ivu-form-item-content">
          <Input v-model="formDate.address" ></Input>
        </Col>
      </Row>
      <Row class="mb20">
        <Col span="5" class="ivu-form-item-label">出租人：</Col>
        <Col span="5" offset="1" class="ivu-form-item-content">
          <Input v-model="formDate.rentPreson" ></Input>
        </Col>
        <Col span="4" class="ivu-form-item-label">承租人：</Col>
        <Col span="5" offset="1" class="ivu-form-item-content">
          <Select v-model="formDate.holder">
            <Option v-for="item in ruleData.personList" :value="item.name" :key="item.relation">{{ item.name }}</Option>
          </Select>
        </Col>
      </Row>
      <Row class="mb20">
        <Col span="5" class="ivu-form-item-label">租赁面积(平方米)：</Col>
        <Col span="5" offset="1" class="ivu-form-item-content">
          <Input v-model="formDate.rentArea" ></Input>
        </Col>
        <Col span="4" class="ivu-form-item-label">租赁金额(元)：</Col>
        <Col span="5" offset="1" class="ivu-form-item-content">
          <Input v-model="formDate.rentMoney" ></Input>
        </Col>
      </Row>
      <Row class="mb20">
        <Col span="5" class="ivu-form-item-label">租赁开始日期：</Col>
        <Col span="5" offset="1" class="ivu-form-item-content">
          <DatePicker type="date" v-model="formDate.rentBegionDate" style="width: 200px"></DatePicker>
        </Col>
        <Col span="4" class="ivu-form-item-label">租赁结束日期：</Col>
        <Col span="5" offset="1" class="ivu-form-item-content">
          <DatePicker type="date" v-model="formDate.rentEndDate" style="width: 200px"></DatePicker>
        </Col>
      </Row>
      <Row class="mb20">
        <Col span="5" class="ivu-form-item-label">备案日期：</Col>
        <Col span="5" offset="1" class="ivu-form-item-content">
          <DatePicker type="date" v-model="formDate.recordDate" style="width: 200px"></DatePicker>
        </Col>
      </Row>
      <Row class="mb20">
        <Col span="5" class="ivu-form-item-label">情况说明：</Col>
        <Col span="15" offset="1">
          <Input v-model="formDate.rentMemo" type="textarea" :rows="3" />
        </Col>
      </Row>
        <Row class="mb20">
          <Col span="5" class="ivu-form-item-label">申请地社区负责人：</Col>
          <Col span="5" offset="1" class="ivu-form-item-content">
            <Input v-model="formDate.committeePrincipal" ></Input>
          </Col>
          <Col span="4" class="ivu-form-item-label">申请地社区经办人：</Col>
          <Col span="5" offset="1" class="ivu-form-item-content">
            <Input v-model="formDate.committeeHandler" ></Input>
          </Col>
        </Row>
      <Row class="mb20">
        <Col span="13" class="ivu-form-item-label">
          <Button @click="save()">提交</Button>
        </Col>
      </Row>
    </Form>
  </div>
</template>
<script>
import { date2str } from '@/api/eventlist'
export default {
  name: 'Form7',
  data () {
    return {
      bwk: '0',
      paramsArr: [],
      list: [],
      sectionList: [],
      streetList: [],
      committeesList: []
    }
  },
  props: {
    formDate: Object,
    ruleData: Object
  },
  mounted () {
    // this.rowList()
  },
  watch: {
    // params (ret) {
    //   console.log(ret)
    // }
  },
  methods: {
    save () {
      this.formDate.rentArea = parseFloat(this.formDate.rentArea).toFixed(2)
      this.formDate.rentMoney = parseFloat(this.formDate.rentMoney).toFixed(2)
      this.formDate.rentBegionDate = date2str(this.formDate.rentBegionDate)
      this.formDate.rentEndDate = date2str(this.formDate.rentEndDate)
      this.formDate.recordDate = date2str(this.formDate.recordDate)
      console.log(this.formDate)
      // 判断必填字段是否为空
      if (!this.formDate.cardNum) {
        this.$Notice.error({ title: '请填写租赁证编号', desc: '' })
        return false
      } else if (!this.formDate.address) {
        this.$Notice.error({ title: '请填写房屋坐落', desc: '' })
        return false
      } else if (!this.formDate.rentPreson) {
        this.$Notice.error({ title: '请填写出租人', desc: '' })
        return false
      } else if (!this.formDate.rentArea) {
        this.$Notice.error({ title: '请填写租赁面积（平方米）', desc: '' })
        return false
      } else if (!this.formDate.rentMoney) {
        this.$Notice.error({ title: '请填写租赁金额（元）', desc: '' })
        return false
      } else if (!this.formDate.rentBegionDate) {
        this.$Notice.error({ title: '请选择租赁开始日期', desc: '' })
        return false
      } else if (!this.formDate.rentEndDate) {
        this.$Notice.error({ title: '请选择租赁结束日期', desc: '' })
        return false
      } else if (!this.formDate.recordDate) {
        this.$Notice.error({ title: '请选择备案日期', desc: '' })
        return false
      } else if (!this.formDate.holder) {
        this.$Notice.error({ title: '请填写承租人', desc: '' })
        return false
      } else if (!this.formDate.rentPreson) {
        this.$Notice.error({ title: '请填写出租人', desc: '' })
        return false
      } else {
        this.$emit('ee')
      }
    }
    // async rowList () {
    //  let params = this.params
    //  let temp = []
    //  temp.push({ type: 'info', size: 'small', c: 1, data: params.row, name: '进度' })
    //  if (params.row.state === '2') {
    //    temp.push({ type: 'info', size: 'small', c: 2, data: params.row, name: '打印通知单' })
    //  }
    //  if (params.row.form_url) {
    //    temp.push({ type: 'info', size: 'small', c: 6, data: params.row, name: '打印表格' })
    //  }
    //  let action1 = evil('(' + params.row.action + ')')
    //  for (let key in action1) {
    //    if (action1[key].type === 'button' && action1[key].next_process_id === '-1') {
    //      let key1 = ''
    //      let key2 = ''
    //      let acs = 3
    //      if (action1[key].params_type) {
    //        key1 = action1[key]
    //        key2 = key
    //        acs = 3
    //      } else {
    //        key1 = key
    //        key2 = action1[key]
    //        acs = 4
    //      }
    //      temp.push({ type: 'success', size: 'small', c: acs, data: { data: params.row, key1: key1, key2: key2 }, name: action1[key].name })
    //    }
    //  }
    //  if (params.row.params && params.row.params !== '{}') {
    //    let param = { id: params.row.item_id, code: params.row.code }
    //    let ax = await itemParamByOrderList(param)
    //    this.paramsArr = ax.data.data
    //    for (let i = 0; i < this.paramsArr.length; i++) {
    //      if (this.paramsArr[i].write_type === 'images') {
    //        temp.push({ type: 'info', size: 'small', c: 5, data: this.paramsArr[i].img_url, name: '查看' + this.paramsArr[i].name })
    //      }
    //    }
    //  }
    //  this.list = temp
    // },
    // async abc () {
    //   let a = await itemParamByOrderList({})
    //   console.log(a, '执行节藕')
    //   this.bwk = a.data
    //   this.$emit('run', { a: 1 })
    // },
    // goRun (type, data) {
    //  this.$emit('breachRun', type, data)
    // }
  }
}
</script>
